<template>
  <div class="topbar">
    <div class="logo-container">
      <h2>后端管理系统</h2>
    </div>
    <div class="main">
      <h3 v-if="parentTitle">{{ parentTitle }} <span>/</span> {{ currentTitle }}</h3>
      <h3 v-else>{{ currentTitle }}</h3>
    </div>
    <div class="user-info">
      <img src="../assets/img/user.png" alt="">
      <span>{{ username }}</span>
      <button v-if="isLoggedIn" @click="logout">退出登录</button>
      <button v-else @click="$router.push('/login')">请登录</button>
    </div>
  </div>
</template>

<script>
import menuItems from '../utils/menuItems.js'; // 引入 menuItems
import jq from "jquery"
export default {
  name: 'TopBar',
  props: {
    currentTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isLoggedIn: localStorage.getItem('isLoggedIn') === 'true',
      username: localStorage.getItem('username') || '未登录用户',
      parentTitle: ''
    };
  },
  created() {
    this.findParentTitle();
  },
  watch: {
    currentTitle() {
      this.findParentTitle();
    }
  },
  methods: {
    async fetchUsername() {
      try {
        const res = await jq.ajax({
          type: "GET",
          url: "http://127.0.0.1:3000/admission"
        });
        const user = res.data.find(u => u.Email === localStorage.getItem('email'));
        this.username = user?.Name || '用户';
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
    findParentTitle() {
      this.parentTitle = '';
      if (!this.currentTitle) return;
      for (const item of menuItems) {
        if (item.children) {
          for (const subItem of item.children) {
            if (subItem.title === this.currentTitle) {
              this.parentTitle = item.title;
              return;
            }
          }
        }
      }
    },
    logout() {
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('username');
      this.$router.push('/login');
    setTimeout(() => window.location.reload(), 0);
    }
  },
  mounted() {
    if (this.isLoggedIn) {
      this.fetchUsername();
    }
  }
};
</script>

<style scoped>
.topbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 5;
  background-color: #fff;
  color: #333;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  /* 修改此处 */
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;

  .logo-container {
    display: flex;
    align-items: center;

    h2 {
      font-size: 20px;
      margin: 0;
    }
  }

  .main {
    font-size: 14px;
    margin: 0 20px;
    flex: 1;

    h3 {
      margin: -10px 50px;
      width: 300px;

      span {
        margin: 0 15px;
      }
    }
  }

  .user-info {
    display: flex;
    align-items: center;

    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-right: 5px;
    }

    button {
      margin-left: 10px;
      background-color: #dc3545;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    button:hover {
      background-color: #c82333;
    }
  }
}
</style>